<!doctype html>
<!--
 This page is shown when the extension button is clicked - showing options, settings, and about/help information.
 -->
<html>
  <head>
    <title>WikiSquared</title>
    <style>
      body {
        width: 275px;
      }
      main {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      button, input.checkbox, label {
        cursor: pointer;
      }
      #collapse_all {
        margin-top: 10px;
      }
      #wikiToolbar {
        width: 200px;
        height: 200px;
        position: fixed;
        left: 0;
        bottom: 0;
      }
    </style>
    
    <script src="jquery-1.7.1.js"></script>
    <script src="jqueryhotkeys.js"></script>
    <script src="main.js"></script>

  </head>
  <body>
    <div id="main">
      <h2>WikiSquared</h2>
      <h4>Collapsible List Levels</h4>
      <input id="show_level1" class="checkbox" type="checkbox"><label for="show_level1">Level 1</label></input>
      <input id="show_level2" class="checkbox" type="checkbox" checked><label for="show_level2">Level 2</label></input>
      <input id="show_level3" class="checkbox" type="checkbox" checked><label for="show_level3">Level 3</label></input> 
      <input id="show_level4plus" class="checkbox" type="checkbox" checked><label for="show_level4plus">Level 4+</label></input> 
      
      <button id="collapse_all" title="Alt + I">Collapse All</button>
      <button id="open_all" title="Alt + O">Open All</button>
      <hr>

      <h4>Marked-Out Content</h4>
        <input id="show_crossed" class="checkbox" type="checkbox" checked><label for="show_crossed">Crossed Out</label></input>
        <input id="show_lightgray" class="checkbox" type="checkbox" checked><label for="show_lightgray">Light Gray</label></input>
        <input id="show_gray" class="checkbox" type="checkbox" checked><label for="show_gray">Gray</label></input> 
      <hr>

      <h4>Collapse Icon Style</h4>
      <button id="collapse_style1">Plus/Minus</button>
      <button id="collapse_style2">Arrow</button>
    </div>
  </body>
</html>

